let svgN = d3.select('#navigator').append('svg').attr('width', '100%').attr('height', '100%')
let getType = ['week', 'month', 'year', 'day']
let select = 3;
let opacityRate = 0.3;

var LevelColorScale1 = d3.interpolate('#F5DC99', 'maroon')
var LevelColorScale2 = d3.interpolate('navy', '#F5DC99')

var center = [210, 150]

function drawNavigatorChart() {
    // 清空画布
    svgN.selectAll("*").remove()

    let arc = d3.arc();
    let sA = 0;
    for (let i = 0; i < 4; i++) {
        svgN.append('path')
            .attr('id', `arc${i}`)
            .attr('transform', `translate(${center[0]}, ${center[1]})`)
            .attr('d', arc({
                innerRadius: 0,
                outerRadius: 110,
                startAngle: sA,
                endAngle: sA + 0.5 * Math.PI
            }))
            .attr('stroke-width', 1)
            .attr('stroke', '#000000')
            .attr('fill', () => {
                if (select == i) {
                    return '#FFC75F';
                } else {
                    return '#FFFFFF';
                }
            })
            .attr('opacity', () => {
                if (select == i) {
                    return 1;
                } else {
                    return opacityRate;
                }
            })
            .on('mouseover', (e) => {    // 鼠标悬停事件
                if (select == i) {
                    d3.select(e.path[0])
                        .attr('fill', '#FFC75F')
                        .attr('opacity', '1')
                } else {
                    d3.select(e.path[0])
                        .transition()
                        .duration(600)
                        .attr('fill', '#FFC75F')
                        .attr('opacity', opacityRate)
                }
            })
            .on('mouseout', (e) => {    // 鼠标移开
                if (select == i) {
                    d3.select(e.path[0])
                        .attr('fill', '#FFC75F')
                        .attr('opacity', '1')
                } else {
                    d3.select(e.path[0])
                        .transition()
                        .duration(600)
                        .attr('fill', '#FFFFFF')
                        .attr('opacity', opacityRate)
                }
            })
            .on('click', (e) => {    // 单机事件
                let jud = (select == i)
                select = i;
                for (let j = 0; j < 4; j++) {
                    if (j != select) {
                        d3.select(`#arc${j}`)
                            .transition()
                            .duration(600)
                            .attr('fill', '#FFFFFF')
                            .attr('opacity', opacityRate)
                    }

                }
                d3.select(`#arc${select}`)
                    .transition()
                    .duration(600)
                    .attr('fill', '#FFC75F')
                    .attr('opacity', 1)
                timeAnlysisType = getType[i]
                if (!jud) {
                    drawTimeAnlysisChart();
                    mapRefresh();
                }
            })
            .attr('opacity', 0)
            .transition()
            .duration(500)
            .attr('opacity', 1)

        sA += 0.5 * Math.PI;
    }
    // draw the text of analysis type
    let fix = [[20, 50], [310, 50], [20, 300], [300, 300]];
    let text = ['Day', 'Week', 'Year', 'Month'];
    let svgNG = svgN.append('g')
    for (let i = 0; i < 4; i++) {
        svgNG.append('text')
            .text(text[i])
            .attr('font-size', 42)
            .attr('fill', 'grey')
            .attr('opacity', 0.3)
            .attr('transform', `translate(${fix[i][0]}, ${fix[i][1]})`)
    }
}

function arcScale(d, a, max) {
    let scale = d3.scaleLinear().domain([0, max]).range([0, 110])
    return [scale(d) * Math.cos(a) + center[0], scale(d) * Math.sin(a) + center[1]]
}

var linePath = d3.line()

function drawLine() {
    let lines = []

    let hd = []
    for (let i in genData.arcHour) {
        hd[parseInt(i)] = genData.arcHour[i]
    }
    let _num = parseInt(Object.keys(genData.arcDay)[Object.keys(genData.arcDay).length - 1])
    let md = new Array(_num)
    let i = _num
    while (i--) { md[i] = 0 }
    for (i in genData.arcDay) {
        md[Number(i)] = genData.arcDay[i]
    }
    let yd = []
    for (let i in genData.arcMonth) {
        yd[parseInt(i) - 1] = genData.arcMonth[i]
    }
    let wd = []
    for (let i in genData.arcWeek) {
        wd[parseInt(i)] = genData.arcWeek[i]
    }
    let befMax = [d3.max(hd), d3.max(md), d3.max(yd), d3.max(wd)]
    let max = d3.max(befMax)


    let hw = 0.5 / 24 * Math.PI;
    let hsL = 1 * Math.PI + hw / 2;
    for (let i = 0; i < 24; i++) {
        lines.push(arcScale(hd[i], hsL, 1.3 * max))
        hsL += hw;
    }

    let ww = 0.5 / 7 * Math.PI;
    let wsL = 1.5 * Math.PI + ww / 2;
    for (let i = 0; i < 7; i++) {
        lines.push(arcScale(wd[i], wsL, 1.3 * max))
        wsL += ww;
    }

    let dw = 0.5 / _num * Math.PI;
    let dsL = 2 * Math.PI + dw / 2;
    for (let i = 1; i < _num; i++) {
        lines.push(arcScale(md[i], dsL, 1.3 * max))
        dsL += dw;
    }

    let mw = 0.5 / 12 * Math.PI;
    let msL = 0.5 * Math.PI + mw / 2;
    for (let i = 0; i < 12; i++) {
        lines.push(arcScale(yd[i], msL, 1.3 * max))
        msL += mw;
    }

    lines.push(lines[0])

    svgN.append('path')
        .attr('d', linePath(lines))
        .attr('stroke', '#000000')
        .attr('stroke-width', 1)
        .attr('fill', 'none')
}



function drawHourarc() {
    svgN.selectAll('*').remove()
    drawNavigatorChart()
    drawLine()
    // console.log(genData)
    let hd = []
    for (let i in genData.arcHour) {
        hd[parseInt(i)] = genData.arcHour[i]
    }
    let arc = d3.arc();
    let s = 1.5 * Math.PI;
    let w = 0.5 / 24 * Math.PI;
    // let sL = 1 * Math.PI + w / 2;
    let max = d3.max(hd)
    let temp = []
    //去除0
    for (let i = 0; i < 24; i++) {
        if (hd[i] != 0)
            temp.push(hd[i])
    }
    let min = d3.min(temp)
    let mean = d3.mean(temp) //平均值
    // let median = d3.median(temp) //中位数
    // console.log("mean: ",mean ,"median: ",median)
    let ShiftLinearScaleb1 = d3.scaleLinear().domain([mean, max]).range([0, 1])
    let ShiftLinearScaleb2 = d3.scaleLinear().domain([min, mean]).range([0, 1])

    // let lines = []
    for (let i = 0; i < 24; i++) {
        svgN.append('path')
            .attr('id', 'arcHour')
            .attr('transform', 'translate(210, 150)')
            .attr('d', arc({
                innerRadius: 110,
                outerRadius: 130,
                startAngle: s,
                endAngle: s + w
            }))
            .attr('stroke-width', 1)
            .attr('stroke', '#000000')
            .attr('fill', () => {
                if (hd[i] <= mean) {
                    return LevelColorScale2(ShiftLinearScaleb2(hd[i]))
                } else if (hd[i] >= mean) {
                    return LevelColorScale1(ShiftLinearScaleb1(hd[i]))
                }
            })
            .attr('opacity', 0)
            .transition()
            .duration(500)
            .attr('opacity', 1)

        // lines.push(arcScale(hd[i], sL, 1.3 * max))
        // sL += w;        
        s += w;
    }
    // svgN.append('path')
    //     .attr('d', linePath(lines))
    //     .attr('stroke', '#000000')
    //     .attr('stroke-width', 1)
    //     .attr('fill', 'none')
}

function drawDayarc() {
    // console.log(genData)
    let _num = parseInt(Object.keys(genData.arcDay)[Object.keys(genData.arcDay).length - 1])
    let md = new Array(_num)
    // console.log(md.length)
    let i = _num
    while (i--) { md[i] = 0 }
    let temp = []
    for (i in genData.arcDay) {
        md[Number(i)] = genData.arcDay[i]
        temp.push(genData.arcDay[i])
    }
    let max = d3.max(temp)
    let min = d3.min(temp)
    let mean = d3.mean(temp)
    // console.log(max,min,mean)
    let arc = d3.arc();
    let s = 0.5 * Math.PI;
    let w = 0.5 / _num * Math.PI;
    // let sL = 2 * Math.PI + w / 2;
    let ShiftLinearScaleb1 = d3.scaleLinear().domain([mean, max]).range([0, 1])
    let ShiftLinearScaleb2 = d3.scaleLinear().domain([min, mean]).range([0, 1])

    // let lines = []
    // console.log(md)
    for (let i = 1; i <= _num; i++) {
        svgN.append('path')
            .attr('id', 'arcDay')
            .attr('transform', 'translate(210, 150)')
            .attr('d', arc({
                innerRadius: 110,
                outerRadius: 130,
                startAngle: s,
                endAngle: s + w
            }))
            .attr('stroke-width', 1)
            .attr('stroke', '#000000')
            .attr('fill', () => {
                if (md[i] <= mean) {
                    return LevelColorScale2(ShiftLinearScaleb2(md[i]))
                } else if (md[i] >= mean) {
                    return LevelColorScale1(ShiftLinearScaleb1(md[i]))
                }
            })
            .attr('opacity', 0)
            .transition()
            .duration(500)
            .attr('opacity', 1)

        // lines.push(arcScale(md[i], sL, 1.3 * max))
        // sL += w;
        s += w;
    }
    // svgN.append('path')
    //     .attr('d', linePath(lines))
    //     .attr('stroke', '#000000')
    //     .attr('stroke-width', 1)
    //     .attr('fill', 'none')
}

function drawMontharc() {
    // console.log(genData)
    let yd = []
    let temp = []
    for (let i in genData.arcMonth) {
        yd[parseInt(i) - 1] = genData.arcMonth[i]
        if (genData.arcMonth[i] != 0)
            temp.push(genData.arcMonth[i])
    }
    let arc = d3.arc();
    let s = Math.PI;
    let w = 0.5 / 12 * Math.PI;
    // let sL = 0.5 * Math.PI + w / 2;
    let max = d3.max(yd)
    let min = d3.min(temp)
    let mean = d3.mean(temp)

    let ShiftLinearScaleb1 = d3.scaleLinear().domain([mean, max]).range([0, 1])
    let ShiftLinearScaleb2 = d3.scaleLinear().domain([min, mean]).range([0, 1])

    // let lines = []

    // console.log(yd, max, min, mean)
    for (let i = 0; i < 12; i++) {
        svgN.append('path')
            .attr('id', 'arcMonth')
            .attr('transform', 'translate(210, 150)')
            .attr('d', arc({
                innerRadius: 110,
                outerRadius: 130,
                startAngle: s,
                endAngle: s + w
            }))
            .attr('stroke-width', 1)
            .attr('stroke', '#000000')
            .attr('fill', () => {
                if (yd[i] <= mean) {
                    return LevelColorScale2(ShiftLinearScaleb2(yd[i]))
                } else if (yd[i] >= mean) {
                    return LevelColorScale1(ShiftLinearScaleb1(yd[i]))
                }
            })
            .attr('opacity', 0)
            .transition()
            .duration(500)
            .attr('opacity', 1)
        // lines.push(arcScale(yd[i], sL, 1.3 * max))
        // sL += w;
        s += w;
    }
    // svgN.append('path')
    //     .attr('d', linePath(lines))
    //     .attr('stroke', '#000000')
    //     .attr('stroke-width', 1)
    //     .attr('fill', 'none')
}

function drawWeekarc() {
    // console.log(genData.arcWeek)
    let wd = []
    let temp = []
    for (let i in genData.arcWeek) {
        wd[parseInt(i)] = genData.arcWeek[i]
        if (genData.arcWeek[i] != 0)
            temp.push(genData.arcWeek[i])
    }

    let arc = d3.arc();
    let s = 0;
    let w = 0.5 / 7 * Math.PI;
    // let sL = 1.5 * Math.PI + w / 2;
    let max = d3.max(wd)
    let min = d3.min(temp)
    let mean = d3.mean(temp)

    let ShiftLinearScaleb1 = d3.scaleLinear().domain([mean, max]).range([0, 1])
    let ShiftLinearScaleb2 = d3.scaleLinear().domain([min, mean]).range([0, 1])

    // let lines = []

    // console.log(yd, max, min, mean)
    for (let i = 0; i < 7; i++) {
        svgN.append('path')
            .attr('id', 'arcWeek')
            .attr('transform', 'translate(210, 150)')
            .attr('d', arc({
                innerRadius: 110,
                outerRadius: 130,
                startAngle: s,
                endAngle: s + w
            }))
            .attr('stroke-width', 1)
            .attr('stroke', '#000000')
            .attr('fill', () => {
                if (wd[i] <= mean) {
                    return LevelColorScale2(ShiftLinearScaleb2(wd[i]))
                } else if (wd[i] >= mean) {
                    return LevelColorScale1(ShiftLinearScaleb1(wd[i]))
                }
            })
            .attr('opacity', 0)
            .transition()
            .duration(500)
            .attr('opacity', 1)
        // lines.push(arcScale(wd[i], sL, 1.3 * max))
        // sL += w;
        s += w;
    }
    // svgN.append('path')
    //     .attr('d', linePath(lines))
    //     .attr('stroke', '#000000')
    //     .attr('stroke-width', 1)
    //     .attr('fill', 'none')
}